<template>
    <el-form ref="ruleFormRef" :model="productData" :rules="rules" label-width="120px" class="demo-ruleForm"
        status-icon>
        <el-form-item label="商品名称" prop="name">
            <el-input v-model="productData.name" />
        </el-form-item>
        <el-form-item label="副标题" prop="subName">
            <el-input v-model="productData.subName" />
        </el-form-item>
        <el-form-item label="类目图片" prop="img">
            <!-- <el-input v-model="formDate.img" /> -->
            <Tuku v-model="productData.img"></Tuku>
        </el-form-item>
        <el-form-item label="热门排序" prop="seq">
            <!-- <el-input v-model="formDate.seq" /> -->
            <el-input-number v-model="productData.seq" :min="1" :max="10" />
        </el-form-item>
        <el-form-item label="价格" prop="price">
            <el-input-number v-model="productData.price" :precision="2" :step="0.1" />
        </el-form-item>
        <el-form-item label="商品介绍" prop="brief">
            <el-input v-model="productData.brief"/>
        </el-form-item>
        <el-form-item label="父目录ID" prop="parentId">
            <!-- <el-input v-model="formDate.parentId" /> -->
            <el-tree-select v-model="productData.categoryId" :data="categorydata" check-strictly
                :render-after-expand="false" style="width: 240px" />
        </el-form-item>
        <el-form-item label="最近更新人" prop="lastUpdateBy">
            <el-input v-model="productData.lastUpdateBy" />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
                确认
            </el-button>
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import Tuku from '@/components/tuku/Tuku.vue'
import { CategoryApi, ProductApi } from '@/api/index'
import { ElMessage } from 'element-plus'
import { useRouter ,useRoute} from 'vue-router'
const router = useRouter()  //带r的是路由页面跳转
const route = useRoute() //不带r的是路由参数获取 在路由跳转的时候传递参数
const ruleFormRef = ref()
const rules = reactive({
    name: [
        { required: true, message: '输入的名称必须是2 to 15 个字符', trigger: 'blur' },
        { min: 2, max: 15, message: 'Length should be 2 to 15', trigger: 'blur' },
    ],
})
const productData = reactive({
    id:0,
    name: '',
    subName: '',
    img: '',
    seq: '',
    price: 0,
    brief: '',
    categoryId: '',
    lastUpdateBy: ''
})
const categorydata = ref([
    {
        value: 0,
        label: '一级目录',
    }
])
onMounted(() => {
    callCategoryApitree()
    productData.id = Number(route.query.id)
    CallProductApi()
})

const CallProductApi = () => { 
    ProductApi.select.call({ id: productData.id }).then((res: any) => { 
        console.log(res);
        productData.name = res[0].name
        productData.subName = res[0].subName
        productData.img = res[0].img
        productData.seq = res[0].seq
        productData.price = res[0].price
        productData.brief = res[0].brief
        productData.categoryId = res[0].categoryId
        productData.lastUpdateBy = res[0].lastUpdateBy

    })
}

//定义格子信息
const callCategoryApitree = () => {
    CategoryApi.select.call().then((res: any) => {
        // console.log(res);
        //获取数据遍历并赋值
        res.forEach((item: any) => {
            item.value = item.id  // 索引
            item.label = item.name // 名称
        });
        const categorydata2 = res.reduce((hezi: any, currentValue: any) => {
            currentValue.children = res.filter((item: any) => {
                return item.parentId === currentValue.id
            })
            // console.log("currentValue=",currentValue);
            if (currentValue.parentId === 0) {
                hezi.push(currentValue)
            }

            return hezi
        }, [])
         console.log(categorydata2);
        categorydata.value = categorydata2
    })
}

const formSubmit = () => {
    ProductApi.update.call({
        id: productData.id,
        name: productData.name,
        subName: productData.subName,
        img: productData.img,
        seq: productData.seq,
        price: productData.price,
        brief: productData.brief,
        categoryId: productData.categoryId,
        lastUpdateBy: productData.lastUpdateBy
    }).then((res: any) => {
        console.log(res);
        if (res == 1) {
            ElMessage.success('修改成功')
            router.push({ name: 'product-list' })
        }
        // ElMessage.success('新增成功')
        // router.push({ name: 'product-list' })
    })
}


const submitForm = async (formEl: any) => {
    if (!formEl) return
    await formEl.validate((valid: any, fields: any) => {
        if (valid) {
            console.log('submit!')
            formSubmit()
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: any) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>

<style scoped>
.el-input {
    width: 260px;
}
</style>